<template>
  <view>
    <view class="project-list">
      <view class="list" v-for="(item, index) in shopData" :key="index">
        <view class="left" @click="imageClick(item)">
          <img src="" alt="">
          <view class="isCheck" v-if="item.isClick && showButton">
            <u-icon name="checkmark-circle-fill" color="rgba(194, 126, 21, 1)" size="15" style="background-color: yellow;"></u-icon>
          </view>
          <view class="show" v-if="item.status === 1">头衔标签</view>
        </view>
        <view class="right">
          <view class="title">
            {{ item.name }}
          <view class="tag" v-if="item.score">评分：{{ item.score }} 分</view>
          </view>
          <view class="distance" v-if="item.shopName">
            <view>所在门店：{{ item.shopName }}</view>
            <view class="name-right">
              <uni-icons type="location-filled" size="20" color="#b4b4b4"></uni-icons>
              <view class="distant">1.1km</view>
              <uni-icons type="right" size="12" color="#676767"></uni-icons>
            </view>
          </view>
          <view class="rate">
            <view class="rate-value">
              <u-rate :count="count" v-model="value" readonly active-color="rgba(194, 126, 21, 1)"></u-rate>
              <view style="margin-left: 10rpx;">技师</view>
            </view>
            <view class="rate-text" v-if="!item.shopName">无需等待</view>
          </view>
          <view class="des" @click="toMasterDetail">
            <span>{{ item.address }} </span>
            <span style=" color:#faa040;margin-left: 5rpx;">
              详情>>
            </span>
          </view>
          <!-- <view class="pre-box" @click="toReserve">
                <view class="preview">预约</view>
              </view> -->
          <view class="money-box">
            <view class="red">
              <u-icon name="rmb" color="#fe4d4f" size="15"></u-icon>
              <view class="money">89</view>
              <view class="rmb-text">会员价</view>
            </view>
            <view class="grey">
              <u-icon name="rmb" color="#6d6d6d" size="12"></u-icon>
              <view class="money">249</view>
              <view class="rmb-text">原价</view>
            </view>
            <view v-if="showButton">
              <view 
              :class="['preview', item.isClick ? 'isClick' : 'notClick']"
              @click="chooseClick(item,index)"
              v-if="item.status !==2">
              {{ item.isClick ? '已选择' : '选择' }}
            </view>
            <view 
              class="preview"
              v-else
              >
              选择
            </view>
            </view>
            <view v-if="showCancelButton" style="color:#c27e15;" @click="cancelChoose(item)">
              取消选择
            </view>  
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'shopList',
  data() {
    return {
      shopData: [],
      count: 3,
      value: 3,
    }
  },
  props: {
    shopConfig: {
      type: Array,
      default: []
    },
    showButton: {
      type: Boolean,
      default: true
    },
    showCancelButton: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    shopConfig: {
      handler(newVal, oldVal) {
        this.shopData = [...newVal]
      }
    }
  },
  created() {
    this.shopData = [...this.shopConfig]
  },

  methods: {
    toShopDetail() {
      this.$emit('toDetail')
    },
    chooseClick(item,index) {
      // item.isClick = !item.isClick
      this.$emit('chooseClick',item,index)
   },
   cancelChoose(item) {

    // item.isClick = true
    this.$emit('cancelChoose',item)
   },
   imageClick(item) {
    this.$emit('imageClick',item)
   },
   toMasterDetail() {
    uni.navigateTo({
      url:'/subPages/home/masterDetail',
    })
   }
  }

}
</script>

<style lang="scss" scoped>
.project-list {
  width: 100%;
  opacity: 1;
  background: rgba(255, 255, 255, 1);
  padding: 10rpx 30rpx;
  // margin-top: 24rpx;

  .list {
    padding: 37rpx 0;
    display: flex;
    justify-content: space-between;
    border-bottom: 1rpx solid rgba(230, 230, 230, 1);

    .left {
      position: relative;
      width: 182rpx;
      height: 198rpx;

      img {
        width: 182rpx;
        height: 182rpx;
        border-radius: 13.93rpx;
      }

      .show {
        position: absolute;
        bottom: 0;
        left: 21%;
        width: 103rpx;
        height: 37rpx;
        line-height: 37rpx;
        opacity: 1;
        border-radius: 32rpx;
        background: rgba(255, 105, 40, 1);
        font-size: 20rpx;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        text-align: center;
      }

      .isCheck {
        width: 30rpx;
        height: 30rpx;
        position: absolute;
        top: 10rpx;
        right: 10rpx;
      }
    }

    .right {
      width: 66%;
      text-align: left;

      .title {
        font-size: 30rpx;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        margin-bottom: 12rpx;
        display: flex;
        .tag {
          width: 114rpx;
          height: 43rpx;
          opacity: 1;
          border-radius: 13rpx;
          background: rgba(255, 241, 238, 1);
          text-align: center;
          line-height: 43rpx;
          margin-left: 12rpx;
          font-size: 20rpx;
          font-weight: 400;
          color: rgba(255, 50, 5, 1);
        }
      }
      .distance {
        display: flex;
        justify-content: space-between;
        font-size: 26rpx;
        font-weight: 400;
        color: rgba(0, 0, 0, 1);
        margin-bottom: 12rpx;
        .name-right {
          display: flex;

          .distant {
            font-size: 22rpx;
            font-weight: 400;
            letter-spacing: 0rpx;
            line-height: 31.86rpx;
            color: rgba(102, 102, 102, 1);
            margin: 0 5rpx 0 6rpx;
            transform: translateY(5rpx);
          }
        }
      }
      .rate {
        display: flex;
        justify-content: space-between;
        font-size: 24rpx;
        font-weight: 400;
        color: rgba(194, 126, 21, 1);

        .rate-value {
          display: flex;
        }
      }

      .des {
        font-size: 26rpx;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        margin-top: 10rpx;
      }

      // .pre-box {
      //   display: flex;
      //   justify-content: flex-end;
      //   margin-top: -15rpx;

      .preview {
        width: 96rpx;
        height: 41rpx;
        opacity: 1;
        border-radius: 38rpx;
        line-height: 41rpx;
        text-align: center;
        font-size: 24rpx;
        font-weight: 500;
        background: rgba(236, 236, 236, 1);
        color: rgba(153, 153, 153, 1);
      }

      .isClick {
        background: #c27e15;
        color: #fff;
      }

      .notClick {
        border: 1rpx solid rgba(194, 126, 21, 1);
        color: rgba(194, 126, 21, 1);
        background-color: #fff;

      }

      // }
      .money-box {
        display: flex;
        // justify-content: space-between;
        margin-top: 12rpx;

        .red {
          display: flex;
   
          .money {
            font-size: 40.11rpx;
            font-weight: 500;
            letter-spacing: -0.28rpx;
            line-height: 47rpx;
            color: rgba(254, 77, 79, 1);
          }

          .rmb-text {
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(254, 77, 79, 1);
            margin-left: 12rpx;
            transform: translateY(10rpx);
          }
        }

        .grey {
          display: flex;
          color: rgba(102, 102, 102, 1);
          margin: 0 30rpx;

          .money {
            font-size: 22.79rpx;
            font-weight: 400;
            letter-spacing: -0.2rpx;
            line-height: 32.99rpx;
            transform: translateY(10rpx);
          }

          .rmb-text {
            font-size: 18.63rpx;
            font-weight: 400;
            letter-spacing: 0rpx;
            line-height: 26.98rpx;
            transform: translateY(14rpx);
            margin-left: 12rpx;
          }
        }
      }
    }
  }
}
</style>